<template>
  <div class="page_log_mgr">
    <Row class="search_row">
      <div style="text-align: left;display: inline-block;">
        <Select v-model="selModule" style="width:200px" placeholder="请选择所属模块" clearable>
          <Option v-for="item in moduleList" :value="item.value" :key="item.value">{{ item.name }}</Option>
        </Select>
        <DatePicker :value="selDateRange" element-id="selDateInput" format="yyyy-MM-dd" type="daterange" separator="到"
                    placement="bottom-end" placeholder="请选择起止日期"
                    style="width: 200px;margin-left: 15px;margin-right: 15px;"></DatePicker>

        <Button type="primary" shape="circle" icon="ios-search" @click="search"></Button>
      </div>
    </Row>
    <Row class="list_row">
      <Table :columns="columns" border :data="opeLogList" stripe>
        <template slot-scope="{ row, index }" slot="seq">
          {{(currentPage - 1) * pageSize + index + 1}}
        </template>
        <template slot-scope="{ row, index }" slot="useTime">
          {{row.useTime}}毫秒
        </template>
        <template slot-scope="{ row, index }" slot="opearte">
          <Button type="primary" size="small" @click="viewLogDetail(row.id)">日志参数详情</Button>
        </template>

      </Table>
      <div class="div_page">
        <Page :total="totalCount" :current="currentPage" :page-size="pageSize"
              show-total show-elevator prev-text="<" next-text=">" @on-change="pageChg"/>
      </div>
    </Row>
  </div>
</template>

<script>
  import OpeLogApi from '@/api/opeLogApi'

  export default {
    name: "mg-log-mgr",
    data() {
      return {
        selDateRange: '',
        selModule: '',
        moduleList: [
          {'name': '任务管理', value: '任务管理'},
          {'name': '站点方案', value: '站点方案'},
          {'name': '任务反馈', value: '任务反馈'},
          {'name': '登录管理', value: '登录管理'},
          {'name': '用户管理', value: '用户管理'},
          {'name': '角色管理', value: '角色管理'}
        ],
        currentPage: 1,
        totalCount: null,
        pageSize: 10,
        opeLogList: [],
        logDetail: '',
        columns: [
          {
            title: '序号',
            slot: 'seq',
            width: 80
          },
          {
            title: '操作用户',
            key: 'userName'
          },
//          {
//            title: 'IP',
//            key: 'ip',
//            width: 120
//          },
          {
            title: '所属模块',
            key: 'module',
            width: 120
          },
          {
            title: '操作行为',
            key: 'operate',
            width: 120
          },
          {
            title: '操作时间',
            key: 'opeTime'
          },
          {
            title: '耗时',
            slot: 'useTime',
            width: 120
          },
          {
            title: '操作',
            slot: 'opearte',
            width: 130
          }
        ]
      }
    },
    methods: {
      search() {
        this.currentPage = 1
        this.fetchopeLogList()
      },
      pageChg(selPage) {
        this.currentPage = selPage
        this.fetchopeLogList()
      },
      fetchopeLogList() {
        this.opeLogList = []
        var param = {'pageSize': this.pageSize, 'currentPage': this.currentPage}
        //获取所属模块 跟起止时间
        if (null != this.selModule && this.selModule.length > 0) {
          param.module = this.selModule
        }
        const ele = document.getElementById("selDateInput");
        if (null != ele) {
          const dateVal = ele.value
          if (null != dateVal && dateVal.length > 0) {
            const arr = dateVal.split("到")
            param.startOpeTime = arr[0]
            param.endOpeTime = arr[1]
          }
        }

        OpeLogApi.pageResult(param).then(res => {
          this.opeLogList = res.data.data.pageResult.items
          this.totalCount = res.data.data.pageResult.totalCount
        })
      },
      viewLogDetail(id) {
        OpeLogApi.getObj(id).then(res => {
          this.logDetail = res.data.data.obj.param
          this.$Modal.info({
            title: "日志详情",
            content: this.logDetail
          });
        })
      }
    },
    created() {
      this.currentPage = 1
      this.fetchopeLogList()
    }
  }
</script>
